<template>
	<view class="main">


		<!-- tabs -satrt -->
		<view class="tabs">
			<view class="tabs-item" :class="[queryParams.flag ==1?'tabs-item-active':'']" @click="switchTabs(1)">
				<span class="tabs-item-text">待办事项</span>
			</view>

			<view class="tabs-item" :class="[queryParams.flag ==2?'tabs-item-active':'']" @click="switchTabs(2)">
				<span class="tabs-item-text">普通公告</span>
			</view>

			<view class="tabs-fun" v-if="queryParams.flag ==2">
				<view class="tabs-fun-item" @click="handleFun(1)">
					<u-icon name="bookmark" color="#111" size="18"></u-icon>
				</view>
				<view class="tabs-fun-item" @click="handleFun(2)">
					<u-icon name="trash" color="#111" size="18"></u-icon>
				</view>
			</view>
		</view>
		<!-- tabs -end -->

		<!--list-satrt -->
		<view class="list" v-if="queryParams.flag ==1">
			<view class="item" v-for="item in 6" @click="toDetail">
				<view class="item-name"> 这里是待办事项名称不可折行超出这里是待办事项名称不可折行超出…</view>
				<view class="item-bottom">
					<span>2024.03.29 10:00</span>
					<view class="item-btn">去办理</view>
				</view>
			</view>
		</view>
		<!--list-end -->

		<view class="list" v-if="queryParams.flag ==2">
			<view class="notice"  v-for="item in 6" @click="toDetail">
				<view class="notice-top">
					<span class="notice-tag"></span>
					<span>会员开通</span>
					<span class="notice-top-tip">未读</span>
				</view>

				<view class="notice-middle">尊敬的用户：您好，您已开通个人会员，如有</view>
				<view class="notice-bottom">
					<span>2024.06.20 14:28:51</span>
					<u-icon name="arrow-right" color="#d7d7d7" size="15"></u-icon>
				</view>
			</view>

		</view>


		<view class="list-end" v-if="dataList.length">{{endText}}</view>

		<u-empty v-if="!dataList.length" mode="car" text="暂无数据" icon="/static/empty-img.png">
		</u-empty>



	</view>
</template>

<script>
	import db from '@/common/localstorage.js'
	export default {
		data() {
			return {
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				userInfo: {},
				queryParams: {
					flag: 1,
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				endText: '',
				dataList: []

			}
		},
		onLoad() {
			this.userInfo = db.get('userInfo')
		},
		onShow() {
			this.queryParams.pageNum = 1
			this.dataList = []
			this.getList()
		},
		methods: {
			getList() {
				this.$modal.msgLoading('加载中')
				var that = this
				
				this.$postjson('/api/RqNotice/list', this.queryParams).then(res => {
					uni.hideLoading()
					if (res.data.code == 0) {
						let detail = res.data.rows
			
						if (detail.length < that.queryParams.pageSize) {
							that.endText = '没有更多了'
						}
						that.total = res.data.total
						that.dataList = that.dataList.concat(detail)
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},

			switchTabs(flag) {
				this.queryParams.flag = flag
				this.queryParams.pageNum = 1
				this.dataList = []
				this.getList()
			},

			toDetail(id) {
				uni.navigateTo({
					url: '/pages/notice/info'
				})

			},
			handleFun(flag){
				let tip = flag==1?'已读':'删除'
				uni.showModal({
				  title: '全部'+tip,
				  content: '是否全部'+tip,
				  success: function (res) {
				    if (res.confirm) {
				    
				    } else if (res.cancel) {
				      console.log('用户点击取消')
				    }
				  }
				})
			}

		},

		onReachBottom: function(e) {
			if (this.total > this.dataList.length) {
				(this.queryParams.pageNum) ++;
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}

	.notice {
		padding: 30upx;
		width: calc(100% - 60upx);
		background: #FFFFFF;
		border-radius: 10upx;
		margin-bottom: 20upx;

		.notice-top {
			display: flex;
			justify-content: space-between;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #111111;
			margin-bottom: 20upx;
			align-items: center;
			position: relative;
			.notice-tag{
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: #F01022;
				left: -20upx;
			}
		}

		.notice-top-tip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}

		.notice-middle {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			padding-bottom: 20upx;
			border-bottom: solid 1upx rgba(228, 228, 228, 0.6);
			margin-bottom: 30upx;
		}

		.notice-bottom {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			display: flex;
			justify-content: space-between;
			align-items: center
		}
	}

	.main {
		padding-bottom: 260upx;
		padding-top: 0;
	}

	.list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24upx;

		.item {
			padding: 30upx;
			width: calc(100% - 60upx);
			background: #FFFFFF;
			border-radius: 10upx;
			margin-bottom: 20upx;
		}

		.item-name {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #111111;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-bottom: 4upx;
		}

		.item-bottom {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: #999999;

			.item-btn {
				width: 130upx;
				height: 60upx;
				background: rgba(17, 170, 102, 0.1);
				border-radius: 30upx;
				text-align: center;
				line-height: 60upx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #11AA66;
			}
		}


	}

	.tabs {
		background: #fff;
		margin-bottom: 20upx;
		width: 100%;
		height: 106upx;
		display: flex;
		align-items: center;
		z-index: 3;
		position: relative;

		.tabs-item {
			width: 200upx;
			height: 106upx;
			line-height: 106upx;
			text-align: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28upx;
			color: #111111;
		}

		.tabs-item-active {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32upx;
			color: #11AA66;
			position: relative;
			z-index: 4;
		}

		.tabs-item-text {
			position: relative;
			z-index: 4;
		}

		.tabs-item-active::after {
			content: '';
			position: absolute;
			width: 60upx;
			height: 8upx;
			background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
			bottom: 0upx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 0;
		}

		.tabs-fun {
			margin-left: auto;
			display: flex;
			align-items: center;
			margin-right: 24upx;

			.tabs-fun-item {
				width: 60upx;
				height: 60upx;
				border-radius: 50%;
				background-color: #EDEDED;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20upx
			}
		}
	}
</style>